<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-01-21 10:30:22
 * @LastEditors: zhangjie
 * @LastEditTime: 2021-01-21 16:30:46
-->
<template>
  <div class="SearchByType">
    <div class="gird-left">
      <el-date-picker
        v-if="rulesLinkageSwitch" 
        v-model="selfValue"
        :value-format="trans[selectValue].format"
        :type="trans[selectValue].type"
        :placeholder="trans[selectValue].pla" />
      <el-input 
        v-else
        v-model="selfValue"
        maxlength="5"
        clearable 
        :placeholder="placeholder"
        onkeyup="this.value = this.value.replace(/^0|[^\d]/g,'')" />
    </div>
    <div>
      <el-select v-model="selectValue" style="width: 76px" class="gird-right">
        <el-option                    
        v-for="(o,i) in rulesOption "
        :key="i" 
        :label="o.label" 
        :value="o.value" />
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchByType',
  props: {
    rulesLinkageSwitch: {
      type: Boolean,
      default: false
    },
    rulesOption: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  watch: {
    selectValue: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.selfValue = ''
      },
    },
    selfValue: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.$emit("change", newVal);
        // this.$emit("change", { value: newVal, field: this.trans[this.selectValue].type });
      },
    },
  },
  data () {
    return {
      va: '',
      selfValue: '',
      selectValue: '0',
      placeholder: '输入大于0的数',
      trans: {
        '0': { pla: '选择年', type: 'year', format: 'yyyy' },
        '1': { pla: '选择月', type: 'month', format: 'yyyy-MM' },
        '2': { pla: '选择日', type: 'days', format: '' }
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .SearchByType{
    display: flex;
    margin-right: 20px;
  }
   ::v-deep .gird-left .el-input__inner{
    border-radius: 4px 0 0 4px;
  }
   ::v-deep .gird-right .el-input__inner{
    border-radius: 0px 4px 4px 0;
    border-left: none;
  }
</style>
